.scroll-view {
    position: relative;
}

.scroll-view:focus {
    outline: none;
}

.scroll-view .bar-area {
    background: rgba(222,222,222,.7);
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .5s ease;
       -moz-transition: opacity .5s ease;
        -ms-transition: opacity .5s ease;
         -o-transition: opacity .5s ease;
            transition: opacity .5s ease;
}

.scroll-view.scrolling .bar-area,
.scroll-view .bar-area:hover {
    opacity: 1;
}

.scroll-view .bar-area.horizontal {
    position: absolute;
    height: 10px;
    width: 100%;
    bottom: 0;
    left: 0;
}

.scroll-view .bar-area.vertical {
    position: absolute;
    width: 10px;
    height: 100%;
    right: 0;
    top: 0;
}

.scroll-view .bar-area>.bar {
    pointer-events: none;
}

.scroll-view .bar-area.vertical>.bar {
    width: 100%;
}

.scroll-view .bar-area.horizontal>.bar {
    height: 100%;
}


.scroll-view>.content,
.scroll-view .bar-area.bar-default>.bar {
    -webkit-transition: transform .5s ease, width .5s ease, height .5s ease;
       -moz-transition: transform .5s ease, width .5s ease, height .5s ease;
        -ms-transition: transform .5s ease, width .5s ease, height .5s ease;
         -o-transition: transform .5s ease, width .5s ease, height .5s ease;
            transition: transform .5s ease, width .5s ease, height .5s ease;
}

.scroll-view.no-transition>.content,
.scroll-view.no-transition .bar-area>.bar,
.scroll-view.scrolling>.content,
.scroll-view.scrolling .bar-area>.bar {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}

.scroll-view .bar-area.bar-default>.bar {
    background: rgba(0,0,0,.5);
    border-radius: 8px;
}
